<template>
	<div
		style="padding-bottom: 50px"
		v-if="Object.keys(data.articleDetail).length"
	>
		<van-nav-bar title="扩展阅读详情" left-arrow @click-left="goBack" />
		<div style="width: 100%">
			<van-card
				:desc="data.articleDetail.extend_article_type.title"
				:title="data.articleDetail.title"
				:thumb="'http://localhost:3000/' + data.articleDetail.cover"
			>
				<template #title>
					<div
						style="
							font-size: 18px;
							color: #222;
							font-weight: 700;
							margin-bottom: 5px;
						"
					>
						{{ data.articleDetail.title }}
					</div>
				</template>
				<template #tags>
					<div
						style="
							margin: 10px 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
						"
					>
						<van-tag plain type="primary">{{
							data.articleDetail.createTime
						}}</van-tag>
						<span
							style="padding: 0 20px; color: red"
							@click="handleDownload"
							>点击下载<van-icon
								name="down"
								size="16"
								color="red"
						/></span>
					</div>
				</template>
			</van-card>
		</div>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<div style="font-size: 20px; color: #222; font-weight: 700">
				简介
			</div>
			<div style="font-size: 16px; color: #666; padding: 10px">
				{{ data.articleDetail.desc }}
			</div>
		</div>

		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<div style="font-size: 20px; color: #222; font-weight: 700">
				内容
			</div>
			<div
				style="font-size: 16px; padding: 10px"
				v-html="data.articleDetail.content"
			></div>
		</div>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<div style="font-size: 20px; color: #222; font-weight: 700">
				同类型推荐
			</div>
			<Waterfall
				:list="data.articleList"
				:breakpoints="{
					1200: { rowPerView: 3 },
					800: { rowPerView: 2 },
					500: { rowPerView: 2 },
				}"
			>
				<template #item="{ item }">
					<div class="water-container" @click="handleToDetail(item)">
						<LazyImg :url="'http://localhost:3000/' + item.cover" />
						<p class="water-title">{{ item.title }}</p>
					</div>
				</template>
			</Waterfall>
		</div>
	</div>
</template>

<script setup>
import { reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";

import { getArticleDetailById, getArticleByTypeAndKeyword } from "@/api/basic";

const route = useRoute();
const router = useRouter();
const data = reactive({
	articleDetail: [],
	articleList: [],
});
onMounted(() => {});

watch(
	() => route.fullPath,
	() => {
		handleGetArticleDetailById();
	}
);

const handleGetArticleDetailById = async () => {
	const res = await getArticleDetailById({ id: route.query.id });
	data.articleDetail = {
		...res.result,
		createTime: dayjs(res.result.createTime).format("YYYY-MM-DD"),
	};
	handleGetArticleList();
};
handleGetArticleDetailById();

const handleGetArticleList = async () => {
	const res = await getArticleByTypeAndKeyword({
		typeId: data.articleDetail.extend_article_type.id,
	});
	data.articleList = res.result.list;
};

const handleDownload = () => {
	const link = document.createElement("a");
	link.href = "http://localhost:3000/" + data.articleDetail.file;
	link.download = data.articleDetail.title + ".pdf";
	link.target = "_blank";
	link.click();
};

const goBack = () => {
	router.back();
};

const handleToDetail = item => {
	router.replace({
		path: "/extendArticleDetail",
		query: {
			id: item.id,
		},
	});
};
</script>
<style scoped></style>
